<script setup>
import {selectArticleCommentApi} from '@/api/commend.js'
import { ref } from 'vue';
import Comments from './comments.vue';
    const props = defineProps({
        article:{
            type:Object,
            required:true
        }
    })
    const articleId = ref()
    const page = ref(0)
    articleId.value = props.article.id  
</script>
<template>
    <!-- 帖子 -->
    <div class="article-box">
         <div class="article">
            <!-- 帖子作者信息 -->
            <div class="head">
                <el-avatar
                class="head-left"
                :size="50" 
                :src="article.user.avatar"/>
                <div class="head-right">
                    <h4 class="name">{{ article.user.username }}</h4>
                    <span class="time">{{ article.updatedAt }}</span>
                </div>
            </div>
            <!-- 标题 文字内容 -->
            <h3 class="title">{{ article.title }}</h3>
            <span class="content">{{ article.content }}</span>
            <!-- 图片 -->
            <div class="imgs">
                <img v-for="img in article.images" :key="img.id" :src="img.imageUrl">
            </div>            
        </div>
    </div>
</template>

<style lang="scss" scoped>
// .article-box{
//     .article{
//     background-color: aliceblue;
//     border-radius: 10px;
//     margin: 20px;
//     padding: 2px 25px;
//     display: flex;
//     align-content: center;
//     flex-direction: column;
//     justify-content: center;
//     .head{
//         display: flex;
//         align-items: flex-start;
//         justify-content: start;
//         .head-left{
//             margin: 25px 10px;
//         }
//         .head-right{
//            // margin-top: 20px;
//             .name{
//                 //display: inline;
//                 margin: 25px 10px 10px;
//             }
//             .time{
//                 margin: -1px 10px -2px;
//                 font-size: 15px;
//                 color: rgb(175, 175, 175);
//             }
//         }
//     }
//     .title{
//         margin: 25px 10px 10px;
//     }
//     .content{
//         margin: 25px 10px 10px;
//     }
//     .imgs{
//         margin: 25px 10px 10px;
//         display: flex;
//         width: 80ch;
//         flex-wrap: wrap;
//         flex-direction:  row;
//         img{
//             margin:4px;
//             width: 200px;
//             height: 200px;
//             display: inline-block;
//         }
//     }
// }
// }
.article-box {
            background-color: #f9f9f9;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* 帖子内部文章部分 */
      .article {
            background-color: #ffffff;
            border-radius: 6px;
            padding: 10px;
        }

        /* 帖子作者信息头部 */
      .head {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        /* 作者头像 */
      .head-left {
            margin-right: 10px;
        }

        /* 作者信息右侧部分 */
      .head-right {
            display: flex;
            flex-direction: column;
        }

        /* 作者名字 */
      .name {
            font-size: 18px;
            font-weight: bold;
            margin: 0;
            color: #333;
        }

        /* 时间信息 */
      .time {
            font-size: 12px;
            color: #999;
        }

        /* 标题 */
      .title {
            font-size: 20px;
            font-weight: bold;
            color: #222;
            margin-bottom: 10px;
        }

        /* 内容部分 */
      .content {
            font-size: 16px;
            color: #555;
            line-height: 1.5;
        }

        /* 图片部分 */
      .imgs {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
        }

        /* 单张图片 */
      .imgs img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 4px;
            margin-bottom: 10px;
            margin-right: 10px;
        }
</style>